<template>
  <cube-scroll
    ref="scroll"
    :data="data"
    :options="options"
    @pulling-down="onPullingDown"
    @pulling-up="onPullingUp"
  >
    <Pad>
      <router-link tag="div" class="notice" v-for="notice in data" :to="`/noticeDetail/${notice.id}`">
        <div class="topic">
          <span class="title">{{ notice.messageTypeName }}</span>
          <span class="date">{{ notice.receiveTime }}</span>
        </div>
        <div class="content">{{ notice.content }}</div>
      </router-link>
    </Pad>
  </cube-scroll>
</template>

<script>
import Pad from "@/components/pad";
import News from "@/components/news";
import { noticeList } from "@/api/notice";
export default {
  data() {
    return {
      queryParams: {
        type: 1,
        current: 1,
        size: 10
      },
      data: [],
      options: {
        // pullDownRefresh: true,
        pullUpLoad: true
      }
    };
  },
  components: {
    News,
    Pad
  },
  created() {
    this.getList().then(({ data }) => {
      this.data = data.records;
    });
  },
  methods: {
    // 获取平台资讯
    getList() {
      return noticeList(this.queryParams);
    },
    onPullingDown() {
      console.log("下拉刷新");
      this.queryParams.current = 1;
    },
    onPullingUp() {
      console.log("上拉加载");
      this.queryParams.current += 1;
      this.getList().then(({ data }) => {
        this.data = [...this.data, ...data.records];
        this.$refs.scroll.forceUpdate(false, true);
        // 已经没有更多页
        if (data.current >= data.pages) {
          this.options.pullUpLoad = false;
          this.$refs.scroll.refresh();
        }
      });
    }
  }
};
</script>

<style lang='scss'>
.notice {
  padding: 0.373333rem /* 28/75 */;
  border-radius: 0.213333rem /* 16/75 */;
  background-color: #fff;
  margin-bottom: 0.266667rem /* 20/75 */;
  .topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.266667rem /* 20/75 */;
    .title {
      color: #333333;
      font-size: 0.32rem /* 24/75 */;
    }
    .date {
      color: #cccccc;
      font-size: 0.266667rem /* 20/75 */;
    }
  }
  .content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #cccccc;
    font-size: 0.266667rem /* 20/75 */;
  }
}
</style>
